<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        width: 200px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        position: relative;
      }
      .left {
        width: 100px;
        height: 30px;
        background-color: greenyellow;
      }
      .right {
        width: 100px;
        height: 30px;
        background-color: grey;
       
      }
      ul {
        box-sizing: border-box;
        list-style: none;
        width: 100px;
        height: 125px;
        position: absolute;
        top: 30px;
        right: 0;
        border: 1px solid gray;
        display: none;
      }
      li {
        height: 30px;
        border-top: 1px dashed gray;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">选择项目:</div>
      <div class="right">
        未选择
      </div>
      <div>
        <ul>
          <li>html5</li>
          <li>css3</li>
          <li>JavaScript</li>
          <li>jQuery</li>
        </ul>
      </div>
    </div>
    <script src="jQuery.js"></script>
    <script>
      $(".right").click(function(ev) {
        $("ul").css("display", "block");
      });
      // $('li').each(function (index,item) {
      //     console.log($('li').text());
      //     $('li')[index].click(function (index) {
      //         console.log('点击了');
      //         console.log($(this).text());
      //     })
      // })
      $("li").on("click", function() {
        console.log("内容" + $(this).html());

        //甚至还可以查看当前元素在父类标签中的排列下标
        console.log("下标" + $(this).index());

        $(".right").html($(this).html());
        $("ul").css("display", "none");
      });
    </script>
  </body>
</html>
